<nz-sider class="menu-sidebar" nzCollapsible nzWidth="256px" nzBreakpoint="md" [(nzCollapsed)]="isCollapsed"
    [nzTrigger]="null">
    <div class="sidebar-logo">
        <a href="https://ng.ant.design/" target="_blank">
            <img src="https://ng.ant.design/assets/img/logo.svg" alt="logo">
            <h1>Ant Design Of Angular</h1>
        </a>
    </div>
    <ul class="sidebar-ul" nz-menu nzTheme="dark" nzMode="inline" [nzInlineCollapsed]="isCollapsed">

        <li *ngFor="let menuItem of sideBarMenu.menu"  nz-submenu nzOpen [nzTitle]="menuItem.text" [nzIcon]="menuItem.icon">
            <ul *ngIf="menuItem.children">
                <li *ngFor="let menuChildItem of menuItem.children" nz-menu-item nzMatchRouter>
                    <a [routerLink]="menuChildItem.url">{{menuChildItem.text}}</a>
                </li>
              
            </ul>
        </li>
        <!-- <li nz-submenu nzOpen nzTitle="Form" nzIcon="form">
            <ul>
                <li nz-menu-item nzMatchRouter>
                    <a>Basic Form</a>
                </li>
            </ul>
        </li> -->
    </ul>
</nz-sider>